<template>
  <div>
    <div style="float: right; margin-right: 7%">
      <van-icon name="setting-o" />
    </div>
    <div style="margin-top: 17px">
      <div style="float: left; padding-left: 10%; padding-top: 3%">
        <van-image
          v-if="isLogin"
          @click="gotoMenu"
          radius="7px"
          width="70px"
          height="70px"
          fit="cover"
          :src="isLoginImg"
        />
        <van-image
          v-else
          @click="gotoMenu"
          radius="7px"
          width="70px"
          height="70px"
          fit="cover"
          :src="isLoginImg2"
        />
      </div>
      <div style="float: left; padding-left: 5%">
        <p style="font-size: 17px">{{isLogin?userInfo.username:'未登录'}}</p>
        <p style="font-size: 14px; color: #c0c0c0"> <van-icon name="envelop-o" /> {{isLogin?userInfo.email:'Email'}}</p>
      </div>
    </div>

    <div style="padding-top: 18%">
      <van-divider
        :style="{ color: '#6633CC', borderColor: '#6633CC', padding: '0 16px' }"
      />
      <van-cell
        title="我的账户"
        icon="wap-home-o"
        style="
          width: 93%;
          margin: 0 auto;
          border-style: solid;
          border-color: #ccccff;
          border-radius: 7px;
        "
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-cell>
    </div>

    <div
      style="
        width: 92%;
        margin: 0 auto;
        margin-top: 5%;
        border-style: solid;
        border-color: #ccccff;
        border-radius: 7px;
      "
    >
      <van-grid :column-num="3">
        <van-grid-item
          icon="comment-o"
          text="我的发布"
          style="color: #3399ff"
        />
        <van-grid-item icon="send-gift-o" text="关注/收藏" style="color: red" />
        <van-grid-item icon="gift-o" text="活动中心" style="color: #ff9966" />
        <van-grid-item
          icon="underway-o"
          text="阅读时长"
          style="color: #6633cc"
        />
        <van-grid-item icon="balance-o" text="余额" style="color: #ff9999" />
        <van-grid-item
          icon="browsing-history-o"
          text="浏览记录"
          style="color: #66ffcc"
        />
      </van-grid>
    </div>

    <div>
      <van-cell-group>
        <van-cell
          title="草稿箱"
          icon="description"
          style="margin-top: 5%; text-align: left; padding-left: 5%"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell
          title="成为作家"
          icon="edit"
          style="margin-top: 2%; text-align: left; padding-left: 5%"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell
          title="帮助与客服"
          icon="service-o"
          style="margin-top: 2%; text-align: left; padding-left: 5%"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>

        <van-cell
          @click="logout"
          title="退出登录"
          icon="close"
          style="margin-top: 2%; text-align: left; padding-left: 5% ;"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <Tabbar/>
  </div>
</template>

<script>
import Vue from "vue";
import { Image as VanImage } from "vant";
Vue.use(VanImage);
import { Icon, Button, Divider, Cell, CellGroup, Grid, GridItem ,Notify  } from "vant";
import Tabbar from "@/components/Tabbar.vue";
import loginRequest from "@/api/login";

export default {
  name: "Home",
  components: {
    Tabbar,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Divider.name]: Divider,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Notify.name]:Notify,
  },
  data() {
    return {
      userInfo: {
        username: "",
        email: "",
      },
      isLogin: false, //是否登录的状态
      isLoginImg:require("../assets/icon/loginImg.png"),
      isLoginImg2:require("../assets/icon/noLoginImg.png")

    };
  },
  created(){
    this.getUserInfo()
  },
  methods: {
    gotoMenu() {
      //指定跳转的地址 this.$router.replace('/menu')
      if(this.isLogin!=true){
        this.$router.replace("/login");
      }
    },
    getUserInfo() {
      loginRequest.userInfo().then((res) => {
        this.userInfo = res.data.data;
        this.isLogin = true;
      });
    },
    logout() {
      loginRequest.logout().then((res) => {
        localStorage.clear();
        sessionStorage.clear();
        // this.$store.commit("resetState");
        this.isLogin = false;
        Notify({ type: 'primary', message: '注销成功' });
      });
    },
  },
};
</script>

<style  scoped>


</style>
